<template>
  <div class="contents">
    <el-row type="flex" align="middle">
      <el-col :span="20">
        <el-row :gutter="10">
          <el-col :span="4">
            <el-select v-model="value1" placeholder="选择仓库">
              <el-option
                v-for="item in optOfChangeWarehouse"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select v-model="value1" placeholder="结算状态">
              <el-option
                v-for="item in optOfSettlementStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select v-model="value1" placeholder="采购模式">
              <el-option
                v-for="item in optOfProcurementMode"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-input placeholder="请输入内容">
              <el-select slot="prepend" placeholder="请选择">
                <el-option label="业务单号" value="1"></el-option>
                <el-option label="对账单号" value="2"></el-option>
              </el-select>
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-col>
          <el-col :span="6">
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 200px;"
            ></el-date-picker>
          </el-col>
          <el-col :span="10">
            <el-form :inline="true">
              <el-form-item label="单据类型：">
                <el-select v-model="value1" placeholder="单据类型">
                  <el-option
                    v-for="item in opt1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="4">
        <el-button style="margin-left: 85px;" type="text" @click="clickOpen">
          <span :style="{ visibility: openCol ? 'hidden' : 'visible' }">
            收起
          </span>
          高级筛选
          <vab-icon :icon="openCol ? 'arrow-down-s-line' : 'arrow-up-s-line'" />
        </el-button>
      </el-col>
    </el-row>
    <div class="advancedPanel" v-show="!openCol">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="对账状态">
          <el-radio-group v-model="form.resource">
            <el-radio label="全部"></el-radio>
            <el-radio label="已对账"></el-radio>
            <el-radio label="未对账"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="锁定状态">
          <el-radio-group v-model="form.resource">
            <el-radio label="全部"></el-radio>
            <el-radio label="未锁定"></el-radio>
            <el-radio label="已锁定"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input
            class="textW"
            v-model="form.desc"
            placeholder="请输入商品名称搜索"
          ></el-input>
        </el-form-item>
        <el-form-item label="计划交货日期">
          <el-date-picker
            class="textW"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结算日期">
          <el-date-picker
            class="textW"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button>重置</el-button>
          <el-button type="primary">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="table1" style="width: 100%; margin-top: 10px;">
      <el-table-column label="业务单号" prop="no" />
      <el-table-column label="采购类型" prop="type" />
      <el-table-column label="计划交货日期" prop="deliveryDate" />
      <el-table-column label="采购员/供应商" prop="purchaseSupplier.name" />
      <el-table-column label="单据类型" prop="address" />
      <el-table-column label="应付金额" prop="address" />
      <el-table-column label="已付金额" prop="address" />
      <el-table-column label="实收金额" prop="financeSupplierBallance.totalUnpayed" />
      <el-table-column label="抹零金额" prop="address" />
      <el-table-column label="未付金额" prop="address" />
      <el-table-column label="对账单号" prop="financeSupplierStatement.no" />
      <el-table-column label="对账状态" prop="checkStatus" />
      <el-table-column label="对账人" prop="financeSupplierStatement.cuser" />
      <el-table-column label="结算状态" prop="financeSupplierBallance.status" />
      <el-table-column label="备注" prop="address" />
    </el-table>
    <el-pagination
      background
      layout="total, prev, pager, next,sizes,jumper"
      :page-size="10"
      :page-sizes="[10, 20, 30, 40, 100]"
      style="text-align: right;"
      :total="0"
    />
  </div>
</template>

<script> 
  import { getList } from '@/api/purchase/purchaseAuditList'

  export default {
    data() {
      return {
        openCol: true,
        value1: '',
        opt1: [],
        table1: [],
        form: {},
      }
    },
    created(){
      this.paggingQuery()
    },
    methods: {
      async paggingQuery(){
        const res = await getList({})
        console.log(res,'1648');
        this.table1 = res.list
      },
      clickOpen() {
        this.openCol = !this.openCol
      },
    },
  }
</script>

<style lang="scss" scoped>
  .contents {
    padding: 10px 20px;

    .advancedPanel {
      background: #f3f5f2;
      width: 100%;
      margin-top: -3px;
      padding: 25px 10px 15px 15px;
      margin-bottom: 5px;
      border-radius: 10px;
    }

    .textW {
      width: 240px;
    }
  }
</style>
